<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>支付页面</title>

    <style type="text/css">
        #logo {
            width: 88px;
            height: 40px;
            border-radius: 10%;
            margin-left: 100px;
            float: left;
        }

        #tit {
            font-family: "楷体";
            color: red;
            font-size: 33px;
            float: left;
            text-decoration: none;
        }

        .bx {
            transform: rotate(180deg);
        }

        #gg5 {
            color: #0099FF;
        }

        #gg5:hover {
            color: red;
        }

        #tjxk, #wyzf {
            color: #0099FF;
            font-size: 18px;
        }

        #tjxk:hover, #wyzf:hover {
            color: red;
        }

        #ljzf {
            background-color: red;
        }

        #ljzf:hover {
            background-color: #ff6365;
        }

        #wjmm {
            color: #007DDB;
        }

        #wjmm:hover {
            color: red;
        }

        #lx .hz:active {
            box-shadow: 0 0 10px #67a4ff;
            overflow: visible;
        }
    </style>
    <script src="jsp/gsjs.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="jsp/gsjs.css"/>
    <link href="jsp/css/public.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="jsp/css/base.css"/>
    <script type="text/javascript" src="jsp/js/jquery_cart.js"></script>
    <link rel="stylesheet" type="text/css" href="jsp/css/checkOut.css"/>

</head>
<body>
<div id="top">
    <div id="topz">
        <div id="top1">
            <img src="jsp/YNIK%7BT%60J8AT~PQ(8LL9QPJR.png">
        </div>
        <div id="top2">
            <a href="/jumpindex" id="top21">集市首页</a>
        </div>
        <div id="top3">
            <span>欢迎来到本集市，开启新鲜水果之旅！</span>
        </div>
        <div id="top4" style="width: 100px;margin-left: 300px">
            <#if userInfo??>
            <a href="login.html" id="top41">你好;${userInfo.username};${userInfo.getUserid()}
                <input id="userid" value="${userInfo.getUserid()}" type="text" style="display: none">
            </a>
            <#else>
            <a href="login.html" id="top41">请登录</a>
        </#if>
    </div>
    <div id="top5">
        <a href="register.html" id="top51">免费注册</a>
    </div>
    <div id="top6">
        <a href="/jumpmygoods" id="top61">我的订单</a>
    </div>
    <div id="top7">
        <a href="" id="top71">商家支持</a>
    </div>
    <div id="top8">
        <a href="" id="top81" onmouseover="over()" onmouseout="out()">网站导航</a>
    </div>
    <div id="top9" onmouseover="over()" onmouseout="out()">
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
        <div id="wzdh1">
            <a href="蔬果集市帮助中心.html" id="wzdh11">帮助中心</a>
        </div>
    </div>
</div>

</div>

<div id="banner" style="margin-top: 28px;">
    <div id="banner4" style="border: none;margin-top: 22px;">
        <div id="logo">
            <a href="/jumpindex"><img src="jsp/731.jpg"></a>
        </div>
        <div id="tt">
            <a href="/jumpindex" id="tit">蔬果集市</a>
        </div>
    </div>
    <div id="banner1"
         style="width: 300px;height: 50px;background-color: #FFFFFF;margin-top: 15px;margin-left: 800px;line-height: 50px;">

        <a href="" style="font-size: 18px;float: right;">使用帮助</a> <a href="" style="float: right;">|</a>
        <a href="" style="font-size: 18px;float: right;">我的订单</a> <a href="" style="float: right;">|</a>
        <a href=""></a>
    </div>
</div>
<div id="gg" style="width: 1200px;height: 100px;margin: auto;">
    <div id="gg1" style="width: 480px;height: 20px;float: left;margin-top: 20px;line-height: 20px;">
        <span style="font-family: '宋体';color: #000000;font-size: 20px;"><b>订单提交成功，请尽快付款！订单号：138375380104</b></span>
    </div>
    <div id="gg2" style="width: 125px;height: 20px;float: right;margin-top: 20px;line-height: 20px;">
        <span style="font-family: '宋体';color: #000000;">应付金额<span
                style="color: red;font-size: 20px;"><b>46.40</b></span>元</span>
    </div>
    <div id="gg3" style="clear: both; width: 400px;height: 20px;float: left;margin-top: 10px;">
        <span style="font-family: '宋体';font-size: 12px;color: #000000;">请您在<span style="color: red;">	<span id="djh"
                                                                                                               style="font-size: 13px;"></span>小时<span
                id="djm" style="font-size: 13px;"></span>分<span id="djs" style="font-size: 13px;"></span>秒</span>内完成支付，否则订单会被自动取消	</span>
    </div>
    <div id="gg4" style="width:61px;height: 20px;float: right;line-height: 20px;margin-top: 10px;">
        <a href="#" id="gg5" style="font-family: '宋体';font-size: 12px;" onclick="bx()">订单详情
            <div id="xz" style="font-family: '宋体';font-size: 14px;float: right;">▾</div>
        </a>
    </div>
</div>
<div id="xs" style="width: 1200px;height: 80px;margin: auto;display: none;">
    <div id="" style="margin: auto;width: 1100px;height: 60px;border-top: 1px solid #bfbfbf;">
        <div id="" style="width: 160px;height: 20px;float: left;margin-right: 200px;">
            <span style="color: #000000;font-size: 12px;">收货地址：湖南工业大学</span>
        </div>
        <div id="" style="width: 160px;height: 20px;float: left;margin-right: 200px;">
            <span style="color: #000000;font-size: 12px;">收货人：**凡</span>
        </div>
        <div id="" style="width: 160px;height: 20px;float: left;">
            <span style="color: #000000;font-size: 12px;">联系电话：*******6386</span>
        </div>
        <div id="" style="clear: both; width: 500px;height: 20px;float: left;margin-top: 12px;">
            <span style="color: #000000;font-size: 12px;">商品名称：南野田园  红心火龙果  金都一号  新鲜水果  精选5斤 【中果】</span>
        </div>
    </div>
</div>
<div id="bottom" style="height: 800px;background: url(../../练习9.16/images/bg2.jpg);">

    <div id="botto1"
         style="width: 1200px;height: 500px;border: 1px solid !important;margin: auto;margin-left: 150px;background-color: #FFFFFF;">

        <div id="" style="width: 1100px;height: 80px;border-bottom: 1px solid #c2c2c2;margin-left: 50px;">

            <div id="" style="float: left;width: 15px;height: 15px;margin-top: 35px;margin-left: 20px;">
                <input type="checkbox" name="" id="" value=""/>
            </div>
            <a href=""
               style="float: left;width: 150px;height: 60px;margin-top: 15px;margin-left: 100px;line-height: 50px;">
                <img data-v-5339a638="" src="https://storage.360buyimg.com/payment-assets/sdk/bank/CCB.png"
                     class="pay-channel-logo" style="width: 50px;height: 50px;">
                <span style="font-family: '宋体';font-size: 20px; color: black;"><b>建设银行</b></span>
            </a>
            <div id="" style="float: left;width: 120px;height: 30px;margin-top: 25px;margin-left: 200px;">
                <span style="font-size: 16px;color: #000000;">储蓄卡(****) </span>
            </div>
            <span style="float: left;margin-top: 25px;font-size: 20px;">|</span>
            <div id=""
                 style="float: left;width: 100px;height: 30px;margin-top: 25px;margin-left: 35px;line-height: 30px;">
                <div id=""
                     style="width: 40px;height: 20px;margin-top: 3px;border: 2px solid red;text-align: center;line-height: 20px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: red;"><b>优惠</b></span>
                </div>
                <span style="font-family: '宋体';font-size: 16px; color: red;display: block;float: left;"><b>请选择</b></span>
            </div>

        </div>
        <div id="" style="width: 1100px;height: 120px;border-bottom: 1px solid #c2c2c2;margin-left: 50px;">
            <a href=""
               style="float: left;width: 150px;height: 60px;margin-top: 15px;margin-left: 80px;line-height: 50px;">
                <img src="https://p.ssl.qhimg.com/dmfd/120_120_80/t016d6b4da58e3315b4.webp"
                     onerror="this.src='https://p.ssl.qhimg.com/t0106e72c3baa75fb49.png'"
                     style="width: 80px;height: 80px;">

            </a>

            <div id="" style="width: 600px;height: 100px;margin-top: 10px;float: left;margin-left: 220px;">

                <div id="" style="float: left;width: 250px;height: 30px;line-height: 30px;">
                    <span style="font-size: 16px;color: #000000;">一键激活并支付，可享立减优惠</span>
                </div>
                <span style="float: left;font-size: 20px;">|</span>
                <div id="" style="float: left;width: 120px;height: 30px;margin-left: 35px;line-height: 30px;">
                    <div id=""
                         style="width: 40px;height: 20px;margin-top: 3px;border: 2px solid red;text-align: center;line-height: 20px;float: left;">
                        <span style="font-family: '宋体';font-size: 16px; color: red;"><b>优惠</b></span>
                    </div>
                    <span style="font-family: '宋体';font-size: 16px; color: red;display: block;float: left;"><b>立减22元</b></span>
                </div>
                <span style="float: left;font-size: 20px;">|</span>
                <div id="" style="float: left;width: 90px;height: 30px;margin-left: 35px;line-height: 30px;">
                    <div id=""
                         style="width: 80px;height: 20px;margin-top: 3px;border: 2px solid red;text-align: center;line-height: 20px;float: left;">
                        <span style="font-family: '宋体';font-size: 16px; color: red;"><b>立即开通</b></span>
                    </div>

                </div>

                <div id=""
                     style="clear: both;width: 100px;height: 50px;border: 1px solid !important;text-align: center;margin-top: 15px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: black;"><b>不分期</b></span><br>
                    <span style="font-family: '宋体';font-size: 14px; color: black;">0服务费</span>
                </div>
                <div id=""
                     style="width: 100px;height: 50px;border: 1px solid !important;text-align: center;margin-top: 15px;margin-left: 10px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: black;"><b>3期</b></span><br>
                    <span style="font-family: '宋体';font-size: 14px; color: black;">8.46元/服务费</span>
                </div>
                <div id=""
                     style="width: 100px;height: 50px;border: 1px solid !important;text-align: center;margin-top: 15px;margin-left: 10px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: black;"><b>6期</b></span><br>
                    <span style="font-family: '宋体';font-size: 14px; color: black;">4.35元/服务费</span>
                </div>
                <div id=""
                     style="width: 100px;height: 50px;border: 1px solid !important;text-align: center;margin-top: 15px;margin-left: 10px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: black;"><b>不12期</b></span><br>
                    <span style="font-family: '宋体';font-size: 14px; color: black;">2.23元/服务费</span>
                </div>
                <div id=""
                     style="width: 100px;height: 50px;border: 1px solid !important;text-align: center;margin-top: 15px;margin-left: 10px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: black;"><b>24期</b></span><br>
                    <span style="font-family: '宋体';font-size: 14px; color: black;">1.31元/服务费</span>
                </div>

            </div>


        </div>
        <div id="" style="width: 1100px;height: 80px;border-bottom: 1px solid #c2c2c2;margin-left: 50px;">
            <a href="aliapy"
               style="float: left;width: 150px;height: 60px;margin-top: 15px;margin-left: 90px;line-height: 50px;">
                <img src="https://p.ssl.qhimg.com/dmfd/120_120_80/t019fd6d8a186d430f3.png"
                     onerror="this.src='https://p.ssl.qhimg.com/t0106e72c3baa75fb49.png'"
                     style="width: 50px;height: 50px;">
                <span style="font-family: '宋体';font-size: 20px; color: black;"><b>支付宝</b></span>
            </a>
            <div id="" style="float: left;width: 120px;height: 30px;margin-top: 25px;margin-left: 200px;">
                <span style="font-size: 16px;color: #000000;">余额 </span>
            </div>
            <span style="float: left;margin-top: 25px;font-size: 20px;">|</span>
            <div id=""
                 style="float: left;width: 100px;height: 30px;margin-top: 25px;margin-left: 35px;line-height: 30px;">
                <div id=""
                     style="width: 40px;height: 20px;margin-top: 3px;border: 2px solid red;text-align: center;line-height: 20px;float: left;">
                    <span style="font-family: '宋体';font-size: 16px; color: red;"><b>优惠</b></span>
                </div>
                <span style="font-family: '宋体';font-size: 16px; color: red;display: block;float: left;"><b>请选择</b></span>
            </div>

        </div>

        <div id="" style="width: 1100px;height: 80px;border-bottom: 1px solid #c2c2c2;margin-left: 50px;">
            <a href=""
               style="float: left;width: 150px;height: 60px;margin-top: 15px;margin-left: 90px;line-height: 50px;">
                <img data-v-5339a638="" src="https://storage.360buyimg.com/payment-assets/sdk/icon/JDGB.png"
                     class="pay-channel-logo" style="width: 50px; height: 50px;">
                <span style="font-family: '宋体';font-size: 20px; color: black;"><b>钢镚</b></span>
            </a>
            <div id="" style="float: left;width: 130px;height: 30px;margin-top: 30px;margin-left: 200px;">
                <span style="font-size: 16px;color: #000000;">本次课消费0.04元 </span>
            </div>

        </div>

        <div style="width: 640px;height: 320px;margin-left: 250px;float:left;display: none">
            <div id=""
                 style="width: 200px;height: 50px;border: 1px solid #c2c2c2;margin-left: 150px;margin-top: 30px;text-align: center;line-height: 50px;">
                <a href="" id="tjxk">添加新卡</a><span style="color: #0099FF;font-size: 18px;">/</span><a href="" id="wyzf">网银支付</a>
            </div>


            <div id="" style="width: 600px;height: 120px;margin-left: 150px;margin-top: 30px;">
                <div id="" style="width: 180px; height: 20px;line-height: 20px;text-align: left;">
                    <span style="color: #9a968f;font-size: 16px;">请输入6位数字支付密码</span>
                </div>

                <div id="lx" style="width: 362px;height:60px;display: block;border: 1px solid #bfbfbf;float: left;">
                    <div class="hz" style="width: 60px;height: 60px;float: left;">
                        <input type="password" id="" value=""
                               style="width: 59px;height: 40px;font-size: 30px;text-align: center;border: 0px;border-right: 2px solid #efefef;margin-top: 10px;"/>
                    </div>
                    <div class="hz" style="width: 60px;height: 60px;float: left;">
                        <input type="password" id="" value=""
                               style="width: 54px;height: 40px;font-size: 30px;text-align: center;border: 0px;border-right: 2px solid #efefef;margin-top: 10px;margin-left: 4px;"/>
                    </div>
                    <div class="hz" style="width: 60px;height: 60px;float: left;">
                        <input type="password" id="" value=""
                               style="width: 54px;height: 40px;font-size: 30px;text-align: center;border: 0px;border-right: 2px solid #efefef;margin-top: 10px;margin-left: 4px;"/>
                    </div>
                    <div class="hz" style="width: 60px;height: 60px;float: left;">
                        <input type="password" id="" value=""
                               style="width: 54px;height: 40px;font-size: 30px;text-align: center;border: 0px;border-right: 2px solid #efefef;margin-top: 10px;margin-left: 4px;"/>
                    </div>
                    <div class="hz" style="width: 60px;height: 60px;float: left;">
                        <input type="password" id="" value=""
                               style="width: 54px;height: 40px;font-size: 30px;text-align: center;border: 0px;border-right: 2px solid #efefef;margin-top: 10px;margin-left: 4px;"/>
                    </div>
                    <div class="hz" style="width: 62px;height: 60px;float: left;">
                        <input type="password" id="" value=""
                               style="width: 54px;height: 40px;font-size: 30px;text-align: center;border: 0px;margin-top: 10px;margin-left: 6px;"/>
                    </div>


                </div>

                <div id="" style="float: left;height: 20px;margin-top: 20px;">
                    <a href="" id="wjmm">忘记支付密码？</a>
                </div>
            </div>

            <a href="">
                <div id="ljzf"
                     style="width: 260px;height: 60px;border: 1px solid #c2c2c2;margin-left: 150px;text-align: center;line-height: 60px;">
                    <span style="color: #FFFFFF;font-size: 20px;">立即支付</span>
                </div>
            </a>

        </div>
    </div>

    <div id="botto2"
         style="width: 1200px;height: 100px;border: 1px solid !important;margin-top: 50px;margin-left: 150px;background-color: #FFFFFF;">

        <a href="" style="float: left; width: 200px;height: 50px;margin-top: 25px;margin-left: 100px;">
            <img data-v-3d284a83="" src="//storage.360buyimg.com/payment-assets/sdk/bank/PAY-UNION.png"
                 class="plate-form-logo" style="width: 50px;height: 50px;">
            <span style="font-size: 20px;color: #363636 ;">中国银联</span>
        </a>
        <span style="display: block;float: left;font-size: 20px;margin-top: 33px;">|</span>
        <a href="" style="float: left; width: 150px;height: 50px;margin-top: 25px;margin-left: 70px;">
            <img data-v-3d284a83="" src="//storage.360buyimg.com/payment-assets/sdk/bank/PAY-WEIXIN.png"
                 class="plate-form-logo" style="width: 50px;height: 50px;">
            <span style="font-size: 20px;color: #363636 ;">微信支付</span>
        </a>


    </div>
</div>
<br><br>

</body>
<script type="text/javascript">
    var x = 0;

    function bx() {
        if (x == 0) {
            document.getElementById("xz").classList.add("bx");
            document.getElementById("xs").style.display = 'block';
            x++;
        } else {
            document.getElementById("xz").classList.remove("bx");
            document.getElementById("xs").style.display = 'none';
            x = 0;
        }
    }

    var a = 21600;

    function djx() {
        var h = Math.floor(a / 3600);
        var b = a - h * 3600;
        var m = Math.floor(b / 60);
        var s = b - m * 60;
        document.getElementById("djh").innerHTML = h;
        document.getElementById("djm").innerHTML = m;
        document.getElementById("djs").innerHTML = s;
        --a;
    }

    window.setInterval(djx, 1000);
    var lx = document.getElementById("lx");
    var lzs = lx.querySelectorAll(".hz");
    var lzIndex = 0;

    function aa() {
        for (var i = 0; i < lzs.length; i++) {
            if (lzs[i].firstElementChild.value == "") {
                console.log(lzIndex);
                lzIndex = i;
                break;
            }
        }
        lzs[lzIndex].firstElementChild.focus();

        if (i == 6) {
            lzs[lzIndex].firstElementChild.blur();
        }
    }

    lx.onclick = aa;
    for (var j = 0; j < lzs.length; j++) {
        lzs[j].firstElementChild.onkeydown = aa;
        if (lzs[j].firstElementChild.keycode == 46) {
            lzs[j].firstElementChild.onkeydown = bb;
        }

    }

    function bb() {
        for (var i = 6; i > 0; i--) {
            if (lzs[i].firstElementChild.value == "") {
                console.log(lzIndex);
                lzIndex = i - 1;
                break;
            }
        }
        lzs[lzIndex].firstElementChild.focus();

        if (i == 6) {
            lzs[lzIndex].firstElementChild.blur();
        }
    }
</script>
</html>
